<template>
  <div class="qrcode-page">
    <!-- 页面主体内容 -->
      <section class="generator___3clAI">
        <section class="nears-responsive-wrapper" style="max-width:1250px;width:px;min-width:0px;margin:0 auto;padding-left:24px;padding-right:24px">

        </section>


        <!-- 导航菜单 -->
        <nav class="cli_nav new-light scene_mobile clearfix">
          <ul class="sub_nav sub_mobile_nav cli_head_container clearfix">
            <li><router-link class="t06971093650622ab_sep on [navigation_text]" to="/qrcode/text" title="生成文本二维码">文本</router-link></li>
            <li><router-link class="tab_sep [navigation_url]" to="/qrcode/url" title="生成网址二维码">网址</router-link></li>
            <li><router-link class="tab_sep [navigation_files]" to="/qrcode/files" @click="StatisticsData(120,13)" title="生成文件二维码">文件</router-link></li>
            <li><router-link class="tab_sep [navigation_img]" to="/qrcode/img" @click="StatisticsData(120,14)" title="生成图片二维码">图片</router-link></li>
            <li><router-link class="tab_sep [navigation_multimedia]" to="/qrcode/multimedia" @click="StatisticsData(120,15)" title="生成音视频二维码">音视频</router-link></li>
            <li><router-link class="tab_sep [navigation_vcard]" to="/qrcode/vcard" @click="StatisticsData(120,16)" title="名片二维码">名片</router-link></li>
            <li><router-link class="tab_sep [navigation_weixin]" to="/qrcode/weixin" @click="StatisticsData(120,17)" title="美化微信二维码">微信</router-link></li>
            <li><router-link class="tab_sep [navigation_form]" to="/qrcode/form" @click="StatisticsData(120,124001)" title="记录表单">表单</router-link></li>
            <li><router-link class="tab_sep [navigation_batch]" to="/qrcode/batch" title="批量生码">批量生码</router-link></li>
            <li><router-link class="tab_sep [navigation_tools]" to="/qrcode/tools" @click="StatisticsData(120,161)" title="更多高级功能">更多工具</router-link></li>
            <li class="pull-right right-nav-items none-after-form">
              <ul>
                <li class="pull-left nav-tool-popover-scan-new">
                  <router-link class="template-code" data-analyze="8,118010" to="/qrcode/template" id="__index_template">
                    <i class="clifont anticon-moban1"></i>
                    模板库建码
                  </router-link>
                </li>
              </ul>
            </li>
          </ul>
        </nav>

        <section class="nears-responsive-wrapper container___2PQHJ" style="max-width:1250px;width:px;min-width:0px;margin:0 auto;padding-left:24px;padding-right:24px">
          <section class="percent70 userInputAreaWrapper___1C1Nh">
            <div class="userInputArea___37Y5Q" style="display:block">
              <button class="__nears_primary_1 ant4-btn __nears_primary_1 ant4-btn-dashed advancedEdit___1orjc to-adv-editor-in-textarea" type="button">
                <span>高级编辑</span>
              </button>
              <div class="userInput___1IQj5">
                <textarea v-model="inputText" class="user-input-textarea" placeholder="请输入文字内容"></textarea>
              </div>
            </div>
            <div class="actions___2haOM">
              <button class="__nears_primary_1 ant4-btn __nears_primary_1 ant4-btn-primary __nears_primary_1 ant4-btn-lg mainAction___3-Mj6 generate-main-action" type="button" @click="generateQRCode">
                <span>生成二维码</span>
              </button>
            </div>
          </section>

          <section class="percent30 codeActionsWrapper___2_NeE">
            <div class="actionsWrapper___3jSy0">
              <div class="badgeEntry___1dDWA" :style="{display: showPlaceholder ? 'block' : 'none'}">
                <router-link to="/qrcode/deqr" class="children-pointer-none to-decode-qr">
                  <i class="clifont anticon-saomashiyong"></i>
                  <span>解码</span>
                </router-link>
              </div>
              <div class="none___1KWtv" style="cursor:pointer" :style="{display: showPlaceholder ? 'block' : 'none'}">
                <img alt="生成二维码" src="./assets/images/3f5aa5ae0f31.png"/>
              </div>
              <div class="qrStyleEntry___b26Ez" :class="{hidden: !showPlaceholder}" v-show="showPlaceholder">
                <div class="entry___1t0FI">
                  <a class="children-pointer-none to-style" href="https://mh.cli.im/" target="_blank">
                    <span class="clifont anticon-meihua"></span>美化
                  </a>
                </div>
                <div class="entry___1t0FI">
                  <a class="children-pointer-none to-make-label"
                     href="https://console.cli.im/batchLabelSpread?from=cliim-style-tpl-detail&fromKey=online&from_case_type=1&isFromCreateAI=false&label_tplid=2504&paintMaterialId=3&styleSizeId=77&style_tplid=623&tab=Online&fromBatchCreateAbTest=test3&style_create_from=9"
                     target="_blank">
                    <span class="clifont anticon-zhizuobiaoqian"></span>制作标签
                  </a>
                </div>
              </div>

              <section class="generated___1zUWD" v-show="showGenerated">
                <div class="w-full flex items-center space-between mb-12">
                  <span class="text-color-primary font-bold">标签样式：基础样式</span>
                  <a class="children-pointer-none cliLink to-toggle-style"
                     href="javascript:;"
                     id="toggle_label_style_tpl"
                     rel="noopener noreferrer"
                     @click="toggleStyle">
                    切换<i class="relative top-1 clifont anticon-cli-angle-right"></i>
                  </a>
                </div>
                <div style="display:block">
                  <div class="qrContainer___2FEvP main-qr-image-container">
                    <img alt="" class="main-qr-image" :src="generatedQRImage"/>
                  </div>
                </div>
                <div class="qr-settings-wrapper mt-12 mb-12">
                  <select class="qr-settings-select" v-model="selectedSettingOption" @change="handleSettingChange">
                    <option value="summary">{{ qrCodeSettings }}</option>
                    <option value="codeType">码制: {{ codeType }}</option>
                    <option value="errorCorrection">容错率: {{ errorCorrection }}</option>
                    <option value="size">尺寸: {{ qrSize }}</option>
                    <option value="version">码版本: {{ qrVersion }}</option>
                    <option value="margin">码边距: {{ qrMargin }}</option>
                  </select>
                </div>
                <div class="w-full actionsGroup1___1mN5c">
                  <button class="__nears_primary_1 ant4-btn __nears_primary_1 ant4-btn-default upload-logo-frame"
                          type="button" @click="uploadLogo">
                    <span>上传Logo</span>
                  </button>
                  <button class="__nears_primary_1 ant4-btn __nears_primary_1 ant4-btn-default to-style-frame"
                          type="button" @click="openStyleFrame">
                    <span>二维码美化</span>
                  </button>
                </div>
                <div class="actionsGroup2___xqi8b">
                  <button class="__nears_primary_1 ant4-btn __nears_primary_1 ant4-btn-primary download-one"
                          type="button" @click="downloadQRCode">
                    <span>下载图片</span>
                  </button>
                </div>
                <div class="actionsGroup3___XiCVq">
                  <a class="bottomText___3LxqN layout-to-paper"
                     href="javascript:;"
                     rel="noopener noreferrer"
                     @click="layoutToPaper">排版到A4纸上</a>
                  <a class="bottomText___3LxqN export-label"
                     href="javascript:;"
                     rel="noopener noreferrer"
                     @click="exportLabel">下载其他格式</a>
                </div>

                <!-- Chinese WeChat Notice -->
                <div class="wechat-notice mt-8 text-xs text-orange-600 bg-orange-50 p-3 rounded">
                  <span>⚠️ 微信不支持展示二维码中的中文，可 </span>
                  <a class="text-blue-600 underline" href="javascript:;" @click="convertToActiveCode">转化为活码</a>
                </div>
              </section>
            </div>
          </section>
        </section>
      </section>

      <section class="nears-responsive-wrapper caoliaoIntroduce___3hKFZ" style="max-width:1250px;width:px;min-width:0px;margin:0 auto;padding-left:24px;padding-right:24px">
        <section class="percent70 intro___1j9Vi">
          <h2 style="margin-bottom:12px">不仅是工具，更是无代码平台</h2>
          <p style="margin-bottom:24px">这些场景已有成熟的二维码应用方案，即用即搭，轻松高效</p>

          <section class="sceneCroups___LHmUs">
            <ul>
              <li>
                <a class="tpl-19 linkCard___2hAV_" href="#case/product" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-wuzi"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <span class="title___8VifO">产品介绍</span>
                    <div class="desc___26K4F">客户扫码了解产品，内容随时更新</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="tpl-143 linkCard___2hAV_" href="#case/signin" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-qiandaobaoming"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <span class="title___8VifO">签到报名</span>
                    <div class="desc___26K4F">覆盖活动介绍、报名、签到全过程</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="tpl-1 linkCard___2hAV_" href="#case/inspection" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-shebeixunjianyuweibao"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <span class="title___8VifO">设备巡检</span>
                    <div class="desc___26K4F">扫码填写巡检记录，防止假检漏检</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="tpl-129 linkCard___2hAV_" href="#case/business" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-yewu"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <span class="title___8VifO">业务介绍</span>
                    <div class="desc___26K4F">公司介绍，个人名片，旅游行程等</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="tpl-144 linkCard___2hAV_" href="#case/entry" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-churudengji"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <span class="title___8VifO">出入登记</span>
                    <div class="desc___26K4F">记录访客及车辆信息，电子化存档</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="tpl-24 linkCard___2hAV_" href="#case/personnel" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-renyuanxinxiguanli"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <span class="title___8VifO">人员管理</span>
                    <div class="desc___26K4F">一人一码，形成人员电子档案</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="tpl-164 linkCard___2hAV_" href="#case/info" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-gonggao2"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <span class="title___8VifO">信息展示</span>
                    <div class="desc___26K4F">资料展示，健康宣教，技术交底等</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="tpl-28 linkCard___2hAV_" href="#case/collect" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-wuzhihuadengji"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <span class="title___8VifO">信息收集</span>
                    <div class="desc___26K4F">问卷反馈，资料收集，投票打分等</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="tpl-8 linkCard___2hAV_" href="#case/patrol" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-a-quyuxuncha1"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <span class="title___8VifO">区域巡查</span>
                    <div class="desc___26K4F">扫码上报安全隐患，整改全程留底</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="tpl-163 linkCard___2hAV_" href="#case/label" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-biaoqian2"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <span class="title___8VifO">标牌标识</span>
                    <div class="desc___26K4F">一物一码信息标牌，如危废标签等</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="tpl-13 linkCard___2hAV_" href="#case/asset" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-a-gudingzichanguanli1"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <span class="title___8VifO">资产管理</span>
                    <div class="desc___26K4F">批量制作资产标签，领用登记盘点</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="tpl-162 linkCard___2hAV_" href="#case/fire" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-zuoce-geipaishuiyuxiaofang"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <span class="title___8VifO">消防安全</span>
                    <div class="desc___26K4F">灭火器消火栓定期检查，安全宣传</div>
                  </div>
                </a>
              </li>
            </ul>
          </section>

          <h3 style="margin-top:48px;margin-bottom:24px">我们整理了以下行业的二维码落地经验，供你参考</h3>

          <section class="industryGroups___2fXaV">
            <ul>
              <li>
                <a class="case-entry-1530 linkCard___2hAV_" href="#case/manufacturing" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-a-shengchanzhizao13"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <div class="title___8VifO">生产制造</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="case-entry-2097 linkCard___2hAV_" href="#case/construction" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-jianzhushigong1"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <div class="title___8VifO">建筑施工</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="case-entry-2261 linkCard___2hAV_" href="#case/energy" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-a-nengyuannenghaoguanli2"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <div class="title___8VifO">能源电力</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="case-entry-1436 linkCard___2hAV_" href="#case/property" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-wuyefuwu"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <div class="title___8VifO">物业后勤</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="case-entry-1720 linkCard___2hAV_" href="#case/education" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-jiaoyu-01"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <div class="title___8VifO">教育培训</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="case-entry-1188 linkCard___2hAV_" href="#case/tourism" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-lvyouziyuan"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <div class="title___8VifO">文化旅游</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="case-entry-1311 linkCard___2hAV_" href="#case/medical" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-yiliao"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <div class="title___8VifO">医疗卫生</div>
                  </div>
                </a>
              </li>
              <li>
                <a class="case-entry-1478 linkCard___2hAV_" href="#case/government" target="_blank">
                  <div class="iconWrapper___3fDfp">
                    <i class="clifont anticon-hangzhengshiyedanwei1"></i>
                  </div>
                  <div class="linkContent___193wd">
                    <div class="title___8VifO">行政事业单位</div>
                  </div>
                </a>
              </li>
            </ul>
          </section>
        </section>

        <section class="percent25 summary___24xRV">
          <div class="baseFeatureIntro___Q-yn3">
            <h3>基本功能长期免费</h3>
            <ul class="basicList___2Mz5p" style="margin-bottom:12px">
              <li>
                <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.8995 6.73049L14.8997 6.73065C14.9462 6.77359 14.9489 6.84611 14.9063 6.89223C14.9063 6.89228 14.9063 6.89233 14.9062 6.89239L8.43339 13.8634L8.43326 13.8635C8.38949 13.9107 8.31713 13.9126 8.27158 13.8704L8.27158 13.8703L8.26991 13.8688L4.47249 10.3784C4.47232 10.3783 4.47215 10.3781 4.47198 10.3779C4.42565 10.3345 4.4231 10.2624 4.46619 10.2158L4.09904 9.8764L4.46577 10.2162C4.50904 10.1695 4.58119 10.1673 4.62687 10.2097L4.62686 10.2097L4.62876 10.2114L7.97732 13.2861L8.34354 13.6224L8.68187 13.258L14.7371 6.73781L14.7372 6.73762C14.7812 6.69026 14.8542 6.6885 14.8995 6.73049Z" stroke="#298447"></path>
                </svg>
                静态码、批量标签等工具完全免费
              </li>
              <li>
                <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.8995 6.73049L14.8997 6.73065C14.9462 6.77359 14.9489 6.84611 14.9063 6.89223C14.9063 6.89228 14.9063 6.89233 14.9062 6.89239L8.43339 13.8634L8.43326 13.8635C8.38949 13.9107 8.31713 13.9126 8.27158 13.8704L8.27158 13.8703L8.26991 13.8688L4.47249 10.3784C4.47232 10.3783 4.47215 10.3781 4.47198 10.3779C4.42565 10.3345 4.4231 10.2624 4.46619 10.2158L4.09904 9.8764L4.46577 10.2162C4.50904 10.1695 4.58119 10.1673 4.62687 10.2097L4.62686 10.2097L4.62876 10.2114L7.97732 13.2861L8.34354 13.6224L8.68187 13.258L14.7371 6.73781L14.7372 6.73762C14.7812 6.69026 14.8542 6.6885 14.8995 6.73049Z" stroke="#298447"></path>
                </svg>
                二维码长期有效
              </li>
              <li>
                <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.8995 6.73049L14.8997 6.73065C14.9462 6.77359 14.9489 6.84611 14.9063 6.89223C14.9063 6.89228 14.9063 6.89233 14.9062 6.89239L8.43339 13.8634L8.43326 13.8635C8.38949 13.9107 8.31713 13.9126 8.27158 13.8704L8.27158 13.8703L8.26991 13.8688L4.47249 10.3784C4.47232 10.3783 4.47215 10.3781 4.47198 10.3779C4.42565 10.3345 4.4231 10.2624 4.46619 10.2158L4.09904 9.8764L4.46577 10.2162C4.50904 10.1695 4.58119 10.1673 4.62687 10.2097L4.62686 10.2097L4.62876 10.2114L7.97732 13.2861L8.34354 13.6224L8.68187 13.258L14.7371 6.73781L14.7372 6.73762C14.7812 6.69026 14.8542 6.6885 14.8995 6.73049Z" stroke="#298447"></path>
                </svg>
                生码个数和扫码次数不限
              </li>
              <li>
                <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.8995 6.73049L14.8997 6.73065C14.9462 6.77359 14.9489 6.84611 14.9063 6.89223C14.9063 6.89228 14.9063 6.89233 14.9062 6.89239L8.43339 13.8634L8.43326 13.8635C8.38949 13.9107 8.31713 13.9126 8.27158 13.8704L8.27158 13.8703L8.26991 13.8688L4.47249 10.3784C4.47232 10.3783 4.47215 10.3781 4.47198 10.3779C4.42565 10.3345 4.4231 10.2624 4.46619 10.2158L4.09904 9.8764L4.46577 10.2162C4.50904 10.1695 4.58119 10.1673 4.62687 10.2097L4.62686 10.2097L4.62876 10.2114L7.97732 13.2861L8.34354 13.6224L8.68187 13.258L14.7371 6.73781L14.7372 6.73762C14.7812 6.69026 14.8542 6.6885 14.8995 6.73049Z" stroke="#298447"></path>
                </svg>
                图片文件存储空间不限
              </li>
              <li>
                <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.8995 6.73049L14.8997 6.73065C14.9462 6.77359 14.9489 6.84611 14.9063 6.89223C14.9063 6.89228 14.9063 6.89233 14.9062 6.89239L8.43339 13.8634L8.43326 13.8635C8.38949 13.9107 8.31713 13.9126 8.27158 13.8704L8.27158 13.8703L8.26991 13.8688L4.47249 10.3784C4.47232 10.3783 4.47215 10.3781 4.47198 10.3779C4.42565 10.3345 4.4231 10.2624 4.46619 10.2158L4.09904 9.8764L4.46577 10.2162C4.50904 10.1695 4.58119 10.1673 4.62687 10.2097L4.62686 10.2097L4.62876 10.2114L7.97732 13.2861L8.34354 13.6224L8.68187 13.258L14.7371 6.73781L14.7372 6.73762C14.7812 6.69026 14.8542 6.6885 14.8995 6.73049Z" stroke="#298447"></path>
                </svg>
                数据收集条数不限
              </li>
            </ul>
          </div>

          <div class="divider___2BVJn"></div>

          <div class="advancedFeatureIntro___22eYu">
            <h3>极高性价比的付费功能</h3>
            <ul class="basicList___2Mz5p" style="margin-bottom:12px">
              <li>
                <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                  <rect height="7" stroke="#FEC22D" transform="rotate(-45 5.05037 10)" width="7" x="5.05037" y="10"></rect>
                </svg>
                优化展示效果，提升品牌形象
              </li>
              <li>
                <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                  <rect height="7" stroke="#FEC22D" transform="rotate(-45 5.05037 10)" width="7" x="5.05037" y="10"></rect>
                </svg>
                支持大规模深入使用，实现高效协作
              </li>
              <li>
                <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                  <rect height="7" stroke="#FEC22D" transform="rotate(-45 5.05037 10)" width="7" x="5.05037" y="10"></rect>
                </svg>
                在二维码上集成AI功能，大幅提升效率
              </li>
            </ul>
            <div>
              <a class="pricing-entry" href="#pricing" style="font-size:13px;margin-top:-2px">
                了解蒜苔如何定价<i class="clifont anticon-el-icon-arrow-right"></i>
              </a>
            </div>
          </div>

          <div class="divider___2BVJn"></div>

          <div>
            <h3>更多工具</h3>
            <div class="toolGroup___35QoU">
              <a class="tool___1fW5e tool-2wma" href="#file-transfer">
                <span>文件传输助手</span>
              </a>
              <a class="tool___1fW5e tool-qrma" href="#invisible-code">
                <span>无痕生码</span>
              </a>
              <a class="tool___1fW5e tool-scanbot" href="#scan-bot">
                <span>扫码机器人</span>
              </a>
              <a class="tool___1fW5e tool-browser-plugin" href="#browser-plugin">
                <span>浏览器插件</span>
              </a>
              <a class="tool___1fW5e tool-mina-home" href="#miniprogram">
                <span>小程序参数码</span>
              </a>
              <a class="tool___1fW5e tool-deqr" href="#decode">
                <span>解码</span>
              </a>
            </div>
          </div>

          <div class="divider___2BVJn"></div>

          <div>
            <h3>社区热点</h3>
            <ul class="normalList___3OtFR">
              <li><a href="#updates/231" title="7月31日产品更新公告">7月31日产品更新公告</a></li>
              <li><a href="#updates/216" title="7月16日产品更新公告">7月16日产品更新公告</a></li>
              <li><a href="#articles/230" title="2025年设备巡检系统评测">2025年设备巡检系统评测</a></li>
            </ul>
          </div>
        </section>
      </section>

      <section class="nears-responsive-wrapper chunk___3McNP siteSummary___2AsfM" style="max-width:1250px;width:px;min-width:0px;margin:0 auto;padding-left:24px;padding-right:24px">
        <h2>每个人都能轻松搭建自己的二维码系统</h2>
        <ul class="flex flex-wrap">
          <li class="siteSummaryItem___JpqcZ">
            <i class="clifont anticon-mokuaihuadajian1"></i>
            <h3>模块化搭建</h3>
            <p>不需要会编程，搭积木一样搭建二维码系统</p>
          </li>
          <div class="siteSummaryItem___JpqcZ">
            <i class="clifont anticon-weixinsaomacaozuo"></i>
            <h3>微信扫码操作</h3>
            <p>无须下载APP，扫一扫+小程序完成操作</p>
          </div>
          <div class="siteSummaryItem___JpqcZ">
            <i class="clifont anticon-mianfeishiyong"></i>
            <h3>免费即可使用</h3>
            <p>深入应用按需付费，可用更多高级功能和服务</p>
          </div>
          <li class="siteSummaryItem___JpqcZ">
            <i class="clifont clifont anticon-fuyongmoban"></i>
            <h3>大量可复用的模板</h3>
            <p>整理自真实应用的模板，可按需调整内容和结构</p>
          </li>
          <div class="siteSummaryItem___JpqcZ">
            <i class="clifont anticon-pc-houtai-xiaochengxu-xian"></i>
            <h3>小程序便捷管理</h3>
            <p>提供小程序工作台，多端协同管理二维码和数据</p>
          </div>
          <div class="siteSummaryItem___JpqcZ">
            <i class="clifont anticon-biaoqianyangshi"></i>
            <h3>快速部署落地</h3>
            <p>150+标签样式，支持批量排版、下载和打印</p>
          </div>
        </ul>
      </section>

      <section class="nears-responsive-wrapper chunk___3McNP moduleGuide___2yJpF" style="max-width:1250px;width:px;min-width:0px;margin:0 auto;padding-left:24px;padding-right:24px">
        <section class="flex-1">
          <h2>灵活组合各种功能模块</h2>
          <p>根据实际需求组合功能，每个人都能用二维码展示内容、收集信息、展示物品档案。</p>
          <ul>
            <li class="active___2dtMR">
              <a href="#more/desc" target="_blank">
                <h3>内容展示<span>了解更多</span></h3>
                <p class="summary___24xRV">灵活组合图片、文件、音视频等内容，在二维码上展示丰富信息，内容可随时修改</p>
              </a>
            </li>
            <li>
              <a href="#form" target="_blank">
                <h3>表单<span>了解更多</span></h3>
                <p class="summary___24xRV">扫码填写表单，包含填写限制、图片水印、消息提醒、数据审核、提交成功页设置、导出PDF等功能</p>
              </a>
            </li>
            <li>
              <a href="#help/82877" target="_blank">
                <h3>状态<span>了解更多</span></h3>
                <p class="summary___24xRV">用于记录物品当前状态，扫码更新状态信息，管理员可在后台查看所有物品的状态</p>
              </a>
            </li>
            <li>
              <a href="#help/68330" target="_blank">
                <h3>动态数据<span>了解更多</span></h3>
                <p class="summary___24xRV">一物一码，表单填写、状态更新、内容编辑等记录都能保存在码上，形成动态数据，可扫码查看。支持设置动态数据面板查看权限。</p>
              </a>
            </li>
          </ul>
        </section>
        <section class="flex-1 relative">
          <img alt="内容展示" class="active___2dtMR" loading="lazy" src="./assets/images/bae659a5dfd8.jpg"/>
          <img alt="表单" loading="lazy" src="./assets/images/59958f3092ac.jpg"/>
          <img alt="状态" loading="lazy" src="./assets/images/01bd8346ae52.jpg"/>
          <img alt="动态数据" loading="lazy" src="./assets/images/3986335a7e9a.jpg"/>
        </section>
      </section>

      <section class="nears-responsive-wrapper chunk___3McNP moduleGuide___2yJpF" style="max-width:1250px;width:px;min-width:0px;margin:0 auto;padding-left:24px;padding-right:24px">
        <section class="flex-1 relative">
          <img alt="数据管理" class="active___2dtMR" loading="lazy" src="./assets/images/25141207ddb2.jpg"/>
          <img alt="成员功能" loading="lazy" src="./assets/images/9e4680067092.jpg"/>
          <img alt="通知与协作" loading="lazy" src="./assets/images/730831a65b8f.jpg"/>
          <img alt="计划管理" loading="lazy" src="./assets/images/d73acedb70ae.jpg"/>
        </section>
        <section class="flex-1 pullRight___38y89">
          <h2>成员间分工管理与协作</h2>
          <p>为不同成员分配不同权限，通过电脑端和手机端小程序协同，实现高效管理与协作。</p>
          <ul>
            <li class="active___2dtMR">
              <a href="#help/74737" target="_blank">
                <h3>数据管理<span>了解更多</span></h3>
                <p class="summary___24xRV">管理表单、状态、扫描量、计划报表等数据，进行汇总统计与分析，或导出PDF存档</p>
              </a>
            </li>
            <li>
              <a href="#help/68920" target="_blank">
                <h3>成员功能<span>了解更多</span></h3>
                <p class="summary___24xRV">将员工按部门、身份等维度区分普通成员和高级成员，给不同的成员赋予不同的权限</p>
              </a>
            </li>
            <li>
              <a href="#help/79609" target="_blank">
                <h3>通知与协作<span>了解更多</span></h3>
                <p class="summary___24xRV">异常消息、后续动态、处理进度、审核消息等实时提醒，提升团队内部沟通协作效率</p>
              </a>
            </li>
            <li>
              <a href="#help/63847" target="_blank">
                <h3>计划管理<span>了解更多</span></h3>
                <p class="summary___24xRV">设备需要定期巡检与保养时，可制定周期性计划，实时查看计划完成情况，避免漏检</p>
              </a>
            </li>
          </ul>
        </section>
      </section>

      <section class="nears-responsive-wrapper chunk___3McNP moduleGuide___2yJpF" style="max-width:1250px;width:px;min-width:0px;margin:0 auto;padding-left:24px;padding-right:24px">
        <section class="flex-1">
          <h2>批量制作二维码标签</h2>
          <p>150+二维码标签样式，支持批量制作、批量管理和排版打印，以及标签代印刷服务。</p>
          <ul>
            <li class="active___2dtMR">
              <a href="#batch" target="_blank">
                <h3>批量生码<span>了解更多</span></h3>
                <p class="summary___24xRV">通过批量模板，上传数据可一次性生成一批不同内容的子码，并支持批量修改与管理</p>
              </a>
            </li>
            <li>
              <a href="#label" target="_blank">
                <h3>标签制作<span>了解更多</span></h3>
                <p class="summary___24xRV">按需选择标签样式，填入数据即可批量生成二维码标签，标签样式保存后可重复使用</p>
              </a>
            </li>
            <li>
              <a href="#help/49343" target="_blank">
                <h3>排版打印<span>了解更多</span></h3>
                <p class="summary___24xRV">提供普通A4纸打印、A4模切不干胶打印、标签打印机打印等多种排版和打印方式</p>
              </a>
            </li>
            <li>
              <a href="#help/54402" target="_blank">
                <h3>代印刷服务<span>了解更多</span></h3>
                <p class="summary___24xRV">提供不干胶、金属板、亚克力等多种精选材质，下单后最快当日发货</p>
              </a>
            </li>
          </ul>
        </section>
        <section class="flex-1 relative">
          <img alt="批量生码" class="active___2dtMR" loading="lazy" src="./assets/images/87f7d59601c4.jpg"/>
          <img alt="标签制作" loading="lazy" src="./assets/images/673fff307c7b.jpg"/>
          <img alt="排版打印" loading="lazy" src="./assets/images/029397cda8c9.jpg"/>
          <img alt="草料印刷服务" loading="lazy" src="./assets/images/b1e2d82781ff.jpg"/>
        </section>
      </section>

      <section class="nears-responsive-wrapper chunk___3McNP moduleGuide___2yJpF" style="max-width:1250px;width:px;min-width:0px;margin:0 auto;padding-left:24px;padding-right:24px">
        <section class="flex-1 relative">
          <img alt="开放API" class="active___2dtMR" loading="lazy" src="./assets/images/8daebd9a6096.jpg"/>
          <img alt="企业微信集成" loading="lazy" src="./assets/images/63b2e8db8134.jpg"/>
          <img alt="蚂蚁区块链" loading="lazy" src="./assets/images/e09805175619.jpg"/>
          <img alt="美化插件" loading="lazy" src="./assets/images/6dce713e37de.jpg"/>
        </section>
        <section class="flex-1 pullRight___38y89">
          <h2>外部系统集成与连接</h2>
          <p>通过开放API、标签API、第三方合作集成等开放能力，与外部系统或平台进行连接。</p>
          <ul>
            <li class="active___2dtMR">
              <a href="#help/83183" target="_blank">
                <h3>开放API<span>了解更多</span></h3>
                <p class="summary___24xRV">提供数据连接、批量生码、标签制作等开放能力，通过API接口集成到企业内部系统</p>
              </a>
            </li>
            <li>
              <a href="#wxwork/index" target="_blank">
                <h3>企业微信集成<span>了解更多</span></h3>
                <p class="summary___24xRV">可设置仅限内部员工扫码操作，直接在企业微信中沟通交流，提升组织协作效率</p>
              </a>
            </li>
            <li>
              <a href="#help/57645" target="_blank">
                <h3>蚂蚁区块链存证<span>了解更多</span></h3>
                <p class="summary___24xRV">免费使用蚂蚁区块链存证，将表单记录和子码内容存证上链，确保数据真实存在</p>
              </a>
            </li>
            <li>
              <a href="#help/61805" target="_blank">
                <h3>百度Sugar BI<span>了解更多</span></h3>
                <p class="summary___24xRV">通过数据API功能将蒜苔收集到的数据推送到百度Sugar BI中，自由搭建看板内容</p>
              </a>
            </li>
          </ul>
        </section>
      </section>

      <section class="nears-responsive-wrapper chunk___3McNP userFeedback___2JOJ-" style="max-width:1250px;width:px;min-width:0px;margin:0 auto;padding-left:24px;padding-right:24px">
        <h2 class="text-center">来自真实用户的落地经验</h2>
        <p class="text-center summary___24xRV">越来越多用户通过自己搭建的二维码业务系统，解决了工作中遇到的各种问题</p>
        <ul>
          <li>
            <a class="baseCard___34CoA" href="#client/detail/1775" target="_blank">
              <img alt="大悦服务" loading="lazy" src="./assets/images/77ab0174e714.png"/>
              <p>"不仅可以灵活搭建自己的物业管理系统，还能够对接数据可视化工具，实现各类管理模块的数据分析统计。"</p>
              <p><span>梁世兵</span> <span>物业品质部工程师</span></p>
            </a>
          </li>
          <li>
            <a class="baseCard___34CoA" href="#client/detail/1741" target="_blank">
              <img alt="洛钼集团" loading="lazy" src="./assets/images/9bb5c23ba63a.png"/>
              <p>"除了简单的系统搭建流程，蒜苔提供了灵活的API接口，可以无限拓展功能，搭建出一套完备的业务系统。"</p>
              <p><span>詹鑫</span> <span>信息化办公室开发组组长</span></p>
            </a>
          </li>
          <li>
            <a class="baseCard___34CoA" href="#client/detail/2056" target="_blank">
              <img alt="公牛集团" loading="lazy" src="./assets/images/514e21d3b36b.png"/>
              <p>"我们在蒜苔二维码上搭建了一套设备监控管理系统，以不到3000元的成本，实现了媲美专业MES系统的效果。"</p>
              <p><span>陈鹏</span> <span>产品质量检测部门负责人</span></p>
            </a>
          </li>
        </ul>
        <div class="mt-48 flex items-center justify-center">
          <a class="__nears_primary_1 ant4-btn __nears_primary_1 ant4-btn-default __nears_primary_1 ant4-btn-lg" href="#client" target="_blank">
            <span>查看更多用户案例</span>
          </a>
        </div>
      </section>

      <section class="nears-responsive-wrapper chunk___3McNP std___1OJVx" style="max-width:1250px;width:px;min-width:0px;margin:0 auto;padding-left:24px;padding-right:24px">
        <h2>可靠、安全、合规的云服务</h2>
        <p class="summary___24xRV">我们始终把稳定可靠放在第一位，遵从严格的数据安全要求，保障业务安全稳定运行</p>
        <ul>
          <li>
            <a class="baseCard___34CoA" href="#help/48400" target="_blank">
              <h3>参与制定二维码国家标准</h3>
              <p>蒜苔二维码参与了《名片二维码通用技术规范》和《商用二维码》等国家标准的起草和制定。<span>了解更多</span></p>
            </a>
          </li>
          <li>
            <a class="baseCard___34CoA" href="https://zj.zjol.com.cn/news.html?id=1805837" target="_blank">
              <h3>北京冬奥会二维码技术支持</h3>
              <p>2022年北京冬奥会期间，为比赛场所提供二维码技术支持，每天扫码登记量高达10万人次。<span>了解更多</span></p>
            </a>
          </li>
          <li>
            <a class="baseCard___34CoA" href="#help/48400" target="_blank">
              <h3>浙江省信用管理示范企业</h3>
              <p>经浙江省企业信用促进会按照标准体系审查、评估、考核，具有完备的信息化管理条件。<span>了解更多</span></p>
            </a>
          </li>
          <li>
            <a class="baseCard___34CoA" href="#aboutus" target="_blank">
              <h3>13年持续稳定运行</h3>
              <p>自2012年上线至今，累计服务数万家企业和行政事业单位，积累了丰富的安全运营经验。<span>了解更多</span></p>
            </a>
          </li>
        </ul>
        <a class="__nears_primary_1 ant4-btn __nears_primary_1 ant4-btn-default __nears_primary_1 ant4-btn-lg protocol___VFrFu" href="#help/48400" target="_blank" title="蒜苔二维码数据安全协议">
          <span>查看数据安全方案</span>
        </a>
      </section>

      <section class="nears-responsive-wrapper chunk___3McNP pricingEntry___2VeDM" style="max-width:1250px;width:px;min-width:0px;margin:0 auto;padding-left:24px;padding-right:24px">
        <h2>免费即可长期使用大部分功能</h2>
        <p class="summary___24xRV">有更高协作管理需求的用户，可以自助购买付费版本，获得更多高级功能和技术支持</p>
        <div class="mt-40 flex items-center justify-center">
          <a class="__nears_primary_1 ant4-btn __nears_primary_1 ant4-btn-primary" href="#help/67108" target="_blank">
            <span>版本选购建议</span>
          </a>
          <a class="__nears_primary_1 ant4-btn __nears_primary_1 ant4-btn-default" href="#price" target="_blank">
            <span>查看价格</span>
          </a>
        </div>
      </section>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import QRCode from 'qrcode'

// 获取路由对象
const route = useRoute()

// 响应式数据
const inputText = ref('')
const activeTab = ref('text')
const showGenerated = ref(false)
const showPlaceholder = ref(true)
const qrCodeUrl = ref('')
const generatedQRImage = ref('')

// QR Code settings
const codeType = ref('QR Code')
const errorCorrection = ref('H级(30%)')
const qrSize = ref('600x600px')
const qrVersion = ref('1 (21*21模块)')
const qrMargin = ref('3个颜色块')
const selectedSettingOption = ref('summary')

// Computed properties
const qrCodeSettings = computed(() => {
  return `${codeType.value}，${errorCorrection.value}，${qrSize.value}`
})

// 组件挂载时检查路由参数
onMounted(() => {
  // 检查是否从解码页面跳转过来
  if (route.query.from === 'decode' && route.query.content) {
    // 自动填充解码内容到输入框
    inputText.value = route.query.content as string
    
    // 可选：自动生成二维码
    // generateQRCode()
    
    // 可选：显示提示信息
    console.log('已自动填充解码内容:', route.query.content)
  }
})

// 方法
const setActiveTab = (tab: string) => {
  activeTab.value = tab
}

const generateQRCode = async () => {
  if (!inputText.value.trim()) {
    alert('请输入文字内容')
    return
  }

  try {
    // Generate QR code with specified options
    const options = {
      errorCorrectionLevel: 'H',  // 30% error correction
      width: 600,                 // 600x600 pixels
      margin: 3,                  // 3 color blocks margin
      color: {
        dark: '#000000',          // Black modules
        light: '#FFFFFF'          // White background
      }
    }

    // Generate QR code as data URL
    const qrDataURL = await QRCode.toDataURL(inputText.value, options)

    // Hide placeholder image and show generated QR code section
    showPlaceholder.value = false
    showGenerated.value = true
    generatedQRImage.value = qrDataURL
    qrCodeUrl.value = qrDataURL

    console.log('QR code generated successfully for:', inputText.value)
  } catch (error) {
    console.error('Failed to generate QR code:', error)
    alert('生成二维码失败，请重试')
  }
}

const toggleStyle = () => {
  console.log('Toggle style clicked')
}

const uploadLogo = () => {
  console.log('Upload logo clicked')
}

const openStyleFrame = () => {
  console.log('Open style frame clicked')
}

const downloadQRCode = () => {
  if (!showGenerated.value) {
    alert('请先生成二维码')
    return
  }
  if (generatedQRImage.value) {
    const link = document.createElement('a')
    link.href = generatedQRImage.value
    link.download = 'qrcode.png'
    link.click()
  }
  console.log('Download QR code clicked')
}

const layoutToPaper = () => {
  console.log('Layout to paper clicked')
}

const exportLabel = () => {
  console.log('Export label clicked')
}

const handleSettingChange = (event: Event) => {
  const target = event.target as HTMLSelectElement
  const selectedValue = target.value

  console.log('Settings changed to:', selectedValue)

  // Show the selected setting details briefly, then reset to summary
  if (selectedValue !== 'summary') {
    // You can add specific logic here for different setting types
    switch (selectedValue) {
      case 'codeType':
        console.log('Code type setting selected:', codeType.value)
        break
      case 'errorCorrection':
        console.log('Error correction setting selected:', errorCorrection.value)
        break
      case 'size':
        console.log('Size setting selected:', qrSize.value)
        break
      case 'version':
        console.log('Version setting selected:', qrVersion.value)
        break
      case 'margin':
        console.log('Margin setting selected:', qrMargin.value)
        break
    }

    // Reset to summary after 2 seconds
    setTimeout(() => {
      selectedSettingOption.value = 'summary'
    }, 2000)
  }
}

const convertToActiveCode = () => {
  console.log('Convert to active code clicked')
  // Navigate to active code generator
}
</script>

<!-- Import external CSS files for navigation styling -->
<style src="./assets/css/b76aaf663b7f.css" scoped/>
<style src="./assets/css/5e6b9bf9fd2f.css" scoped/>
<style src="./assets/css/2034b15460f1.css" scoped/>   <!--导航栏字号-->

<style scoped>

/* Vue组件特有样式覆盖 */
.qrcode-page a {
  text-decoration: none;
  color: inherit;
}

.qrcode-page a:hover {
  color: inherit;
}

.user-input-textarea {
  width: 100%;
  min-height: 120px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 12px;
  font-size: 14px;
  resize: vertical;
  outline: none;
}

.user-input-textarea:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.main-qr-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 确保图标字体正常显示 */
.clifont {
  font-family: "clifont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cliIcon {
  font-family: "cliIcon" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* QR Style Entry Layout Fix */
.qrStyleEntry___b26Ez {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  align-items: center !important;
}

.qrStyleEntry___b26Ez .entry___1t0FI {
  flex: 1 !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Hidden state */
.qrStyleEntry___b26Ez.hidden,
.qrStyleEntry___b26Ez[style*="display: none"] {
  display: none !important;
}

/* QR Settings Wrapper */
.qr-settings-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* QR Settings Select Dropdown */
.qr-settings-select {
  width: 100%;
  height: 32px;
  border: 1px solid #d9d9d9;
  background: white;
  color: #666;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  padding: 0 12px;
  border-radius: 6px;
  line-height: 32px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="m0 0l2 2 2-2z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 32px;
}

.qr-settings-select::-ms-expand {
  display: none;
}

.qr-settings-select:focus {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.qr-settings-select option {
  background: white;
  color: #333;
  padding: 8px 12px;
  font-size: 12px;
}

/* WeChat Notice Styling */
.wechat-notice {
  border-left: 4px solid #ff8c00;
}

/* Ensure responsive behavior */
@media (max-width: 768px) {
  .percent70 {
    width: 100% !important;
  }

  .percent30 {
    width: 100% !important;
    margin-top: 20px;
  }

  .qrStyleEntry___b26Ez {
    flex-direction: column;
    gap: 8px;
  }
}

/* 修正绿色按钮的文字颜色 - 仅针对版本选购建议按钮 */
.pricingEntry___2VeDM .__nears_primary_1.ant4-btn-primary {
  color: #fff !important;
}
</style>
